<!--
  @author duanzuocai
  @功能说明：圆型地图
    需要父页面提供
        1、接收数据方法：submitMap(mapData)
        2、初始化参数-城市名和经纬度：mapArgs.point.longitude,latitude
        3、初始化参数-圆型数据（百度生成的）：mapArgs.pointData
  @since 2018/11/01 13:18
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 100%;
            width: 100%;
        }

        #control {
            width: 100%;
            position: absolute;
            bottom: 2em;
            padding-left: 2em;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=otGlzpt0684vtqNg4XNF6qvj"></script>
    <title>设置线、面可编辑</title>
</head>
<body style="position: relative; overflow: hidden;">
<div id="allmap"></div>
<div id="control">
    <button onclick="BaiduMap.circle.enableEditing();">开启面编辑功能</button>
    <button onclick="BaiduMap.circle.disableEditing();">关闭面编辑功能</button>
    <button onclick="BaiduMap.reset();">重置</button>
    <button onclick="BaiduMap.submitData();">完成</button>
</div>
</body>
</html>
<script type="text/javascript">
    document.domain = "xiujiadian.com";
    var BaiduMap = {
        circle: null,
        point: null,
        map: null,
        createBaiduMap: function () {
            // 百度地图API功能1
            var map = new BMap.Map("allmap", {enableMapClick: false});
            map.centerAndZoom(this.point, 15);
            map.enableScrollWheelZoom();

            //增加圆
            map.addOverlay(BaiduMap.circle);
            this.map = map;
        },
        submitData: function () {
            // 父页面接收数据ID: baiduMapDataId
            var circle2 = BaiduMap.circle;
            window.parent.submitMap(circle2.getRadius(), circle2.getCenter().lng, circle2.getCenter().lat);
        },
        reset: function () {
            this.initCircle();
            this.createBaiduMap();
        },
        /**
         * 根据网点初始化一个小范围
         * 需要父页面提供参数对象：{longitude, latitude}
         */
        initCircle: function (size) {
            if (!size || isNaN(parseInt(window.parent.mapArgs.pointData))) {
                size = 500;
            }
            var lng = parseFloat(window.parent.mapArgs.point.longitude);
            var lat = parseFloat(window.parent.mapArgs.point.latitude);

            var point = new BMap.Point(lng, lat);
            this.point = point;

            // 创建圆
            var circle = new BMap.Circle(point, size, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});

            this.point = point;
            this.circle = circle;
        }
    };

    BaiduMap.initCircle(window.parent.mapArgs.pointData);
    BaiduMap.createBaiduMap();
</script>
</html>